<template>
    <div class='container'>
        <div class="title">
            设备分类
        </div>
        <div ref="bar" id="main3" style="width: 97%; height: 75%" v-show="barData.length > 0"></div>
        <div v-if="barData.length <= 0" class="no-warn-info">
            <img :src="wugj">
            <div>暂无设备</div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import {
    reqDeviceType,
} from "@api/apiDatav.js";

export default {
    components: {
    },
    data() {
        return {
            wugj: require("@assets/images/datav/wugj.png"),
            barChart: null,
            barData: [
                {
                    name: "商家1",
                    value: 12,
                },
                {
                    name: "商家2",
                    value: 22,
                },
                {
                    name: "商家3",
                    value: 10,
                },
                {
                    name: "商家4",
                    value: 32,
                },
                {
                    name: "商家5",
                    value: 25,
                },
                {
                    name: "商家6",
                    value: 16,
                },
                {
                    name: "商家7",
                    value: 52,
                },
                {
                    name: "商家8",
                    value: 33,
                },
                {
                    name: "商家9",
                    value: 19,
                },
                {
                    name: "商家10",
                    value: 36,
                },
                {
                    name: "商家11",
                    value: 24,
                },
                {
                    name: "商家12",
                    value: 42,
                },
                {
                    name: "商家13",
                    value: 29,
                },
                {
                    name: "商家14",
                    value: 33,
                },
            ],
            current: 1, // 当前页
            total: null, // 总页数
            timerId: null, // 定时器
        }
    },
    computed: {
        ...mapState(["user", "datav"]),
    },
    watch: {},
    methods: {
        // 产品类型
        async DeviceType() {
            this.barData = []
            let res = await reqDeviceType({
                tenantId: this.user.tenantId,
                orgId: this.datav.orgarr.id,
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            // console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            if (res.data.row.length == 0) return;
            this.barData = res.data.row.map(item => {
                return {
                    name: item.productName,
                    value: item.count,
                }
            })

            /**
          * 需求：
          * 1、对数据进行从小到大排序,分为5个一组
          * 2、每隔3S切换一组展示，页面销毁清除定时器
          * 3、当鼠标移入图表停止切换，鼠标移出开启切换
          */
            await this.init();
            await this.getData();
            await this.openTimer();
            // 监听屏幕大小变化
            window.addEventListener("resize", this.screenResize);
            // 一进来主动调取屏幕适配
            await this.screenResize();

        },
        // 初始化图表
        init() {
            var chartDom = document.getElementById("main3");
            this.barChart = echarts.init(chartDom);

            // 拆分option：1、静态配置在初始化的时候先注册，每一次setOption是合并关系
            let initOption = {
                // 标题
                // title: {
                //   text: "▍横向柱状图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全
                //   left: 40,
                //   top: 40,
                //   textStyle: {
                //     color: "#fff",
                //   },
                // },
                color: ['#09E2F8'],//颜色
                // 坐标轴
                grid: {
                    top: "10%",
                    left: "10%",
                    right: "8%",
                    bottom: "0",
                    containLabel: true, //是否包含坐标轴的文字
                },
                // X轴：横向柱状图，将xAxis的type设置为value
                xAxis: {
                    type: "value",
                    minInterval: 1,//不允许出现小数位
                    min: 0,//坐标轴刻度最小值。
                    //  max:3,//坐标轴刻度最大值。
                    //设置坐标轴字体颜色和宽度
                    axisLine: {  //这是x轴文字颜色
                        show: false,// 单独隐藏坐标线
                        lineStyle: {
                            color: "#fff",
                        }
                    },
                    //网格线
                    splitLine: {
                        show: true, //隐藏或显示
                        lineStyle: {
                            color: "#09E2F8",
                            type: 'dashed'//设置网格线类型 dotted：虚线 solid:实线
                        }
                    },
                    // 单独隐藏刻度线
                    axisTick: {
                        show: false
                    },
                },
                // Y轴：横向柱状图，将xAxis的type设置为category
                yAxis: {
                    type: "category",

                    // 单独隐藏刻度线
                    axisTick: {
                        show: false,
                    },
                    // 单独隐藏坐标线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",//文字颜色 以及坐标线颜色
                        } // 样式
                    },
                    axisLabel: {
                        show: true,
                        inside: true,
                        interval: 0, //横轴信息全部显
                        splitNumber: 50,
                        // boundaryGap: [20, 20],
                        textStyle: {
                            color: '#FFF',
                            verticalAlign: 'bottom',
                            fontSize: 12,
                            align: 'left',
                            padding: [0, 0, 5, 0]
                        }
                    },
                },
                // 图表内容
                series: [
                    {
                        type: "bar", // 图表类型
                        // 柱上面的数值配置
                        label: {
                            show: true, // 显示值
                            position: "right", // 显示位置
                            color: "white",
                        },
                        // 每一个条目的样式配置
                        // itemStyle: {
                        //   // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                        //   color: new LinearGradient(0, 0, 1, 0, [
                        //     { offset: 0, color: "#5050ee" },
                        //     { offset: 1, color: "#ab6ee5" },
                        //   ]),
                        // },
                    },
                ],
                // 提示框设置
                tooltip: {
                    trigger: "axis", //触发类型——坐标轴
                    // 鼠标移入条目下面的背景
                    axisPointer: {
                        type: "line",
                        z: 0,
                        lineStyle: {
                            color: "rgba(225,225,225,.3)",
                        },
                    },
                },
            };
            this.barChart.setOption(initOption);
            // 监听鼠标移入移出事件
            this.barChart.on("mouseover", (params) => {
                // console.log(params);
                clearInterval(this.timerId);
            });
            this.barChart.on("mouseout", () => {
                this.openTimer();
            });
        },
        // 获取并处理数据，然后渲染图表
        getData() {
            // 排序
            this.barData = this.barData.sort((a, b) => a.value - b.value);
            // 总页数
            this.total =
                this.barData.length % 4 == 0
                    ? this.barData.length / 4
                    : parseInt(this.barData.length / 4) + 1;
            // 当前显示的5条数据
            let list = this.barData.slice((this.current - 1) * 4, this.current * 4);
            // 当前X、Y轴数据
            let barDataY = list.map((item) => item.name);
            let barDataX = list.map((item) => item.value);

            // 拆分option：2、data配置在获取导数据的时候注册，每一次setOption是合并关系
            let dataOption = {

                // Y轴：横向柱状图，将xAxis的type设置为category
                yAxis: {
                    data: barDataY,
                },
                // 图表内容
                series: [
                    {
                        data: barDataX, // 数据
                        // itemStyle: {
                        //   normal: {
                        //     //这里是重点
                        //     color: function (params) {
                        //       //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色  , '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'
                        //       var colorList = ['#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8'];
                        //       return colorList[params.dataIndex]
                        //     }
                        //   }
                        // }
                    },
                ],
            };
            // 生成图表
            this.barChart.setOption(dataOption);
        },
        // 定时切换当前展示页码
        openTimer() {
            if (this.timerId) {
                clearInterval(this.timerId);
            }
            this.timerId = setInterval(() => {
                if (this.current < this.total) {
                    this.current++;
                } else {
                    this.current = 1;
                }
                this.getData();
            }, 5000);
        },
        // 监听屏幕变化
        screenResize() {
            this.$nextTick(() => {
                // 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸
                let width = this.$refs.bar.offsetWidth;
                let size = (width / 100) * 2.6; // 定义一个基准尺寸

                // 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候set
                let screenOption = {
                    // 标题
                    title: {
                        textStyle: {
                            fontSize: size, //标题大小
                        },
                    },
                    // 图表内容
                    series: [
                        {
                            barWidth: size, // 柱的宽度
                            // 每一个条目的样式配置
                            // itemStyle: {
                            //   barBorderRadius: [0, size / 2, size / 2, 0], // 圆角
                            // },
                        },
                    ],
                    // 提示框设置
                    tooltip: {
                        // 鼠标移入条目下面的背景
                        axisPointer: {
                            lineStyle: {
                                width: size,
                            },
                        },
                    },
                };
                this.barChart.setOption(screenOption);
                // 更新图表
                this.barChart.resize();
            });
        },
    },
    created() {

    },
    async mounted() {
        // await this.DeviceType()//接口真实数据

    },
    beforeDestroy() {
        clearInterval(this.timerId);
        window.removeEventListener("resize", this.screenResize);
    },
}
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600
    }
}

.no-warn-info {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top: 1.5%;
    color: #fff;
    font-size: 0.7vw;

    >img {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }
}
</style>